<template>
    <div class="header">
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item to="/index" v-if="$route.path !== `/index` " class="index">{{name}}</el-breadcrumb-item>
            <el-breadcrumb-item  v-for="(v, i) in menuArr " :to="v.path" :key="i" >{{ v.name }}</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 管理员信息 -->
        <el-dropdown @command="jump">
            <span class="el-dropdown-link">
                欢迎您{{account}}
                <el-avatar :size="50" :src="imgUrl"></el-avatar>
            </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="/account/personaldata">个人信息</el-dropdown-item>
                <el-dropdown-item command="/logout">退出登陆</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</template>

<script>
import local from '@/utils/local.js'
import{userInfo} from '@/api/user.js'
export default {
    data() {
        return {
            //默认头像，远程地址直接使用，本地地址需要引入后再使用
            imgUrl:'',
            menuArr: [],
            name:"后台首页",
            account:""
        };
    },
    methods: {
        //点击下拉菜单时执行事件处理函数
        jump(path) {
            if(path === '/logout'){
                local.clear()
                this.$router.push('/login')
            }
            else{
                this.$router.push(path);
            }
        
        },
        render() {
            let arr = this.$route.matched.filter(v => {
                return v.meta.title
            });
            this.menuArr = arr.map(v => {
                return { name: v.meta.title, path: v.path }
            })
        },
        
    },
    async created() {
        this.render()
        // 获取管理员信息
        let res = await userInfo();
        local.set('userinfo',res.data)
        this.account =res.data.account;
        this.imgUrl=res.data.imgUrl;
        console.log(res);
        // 绑定事件，接受头像参数
        this.$bus.$on('sendImg',(url)=>{
            this.imgUrl=url
        })
      
    },
    watch: {
        "$route.path"(v) {
            this.render()
        }
    },
};
</script>

<style lang="less" scoped>
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;

    i {
        color: #fff;
    }

}

.el-breadcrumb__inner {
    color: #000;
}
 .el-breadcrumb{
    .is-link{
    color: #000 !important;
}

 } 


.el-avatar {
    vertical-align: middle;
}
</style>
